<template>
	<view class="detail-container">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" circular :duration="1000">
			<swiper-item v-for="banner in pics" :key="banner.id">
				<image :src="banner.pic" mode="scaleToFill"></image>
			</swiper-item>
		</swiper>
		<view class="item-info">
			{{basicInfo.name}}
		</view>
		<!-- <view class="content" v-html="content">
			
		</view> -->
		<rich-text :nodes="content"></rich-text>
	</view>
	<!-- 商品行动栏 -->
	<view class="action-bar">
		<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="onClick"
			@buttonClick="buttonClick" />
	</view>
	
	<!-- /商品行动栏 -->
	<!-- 商品规格弹窗 -->
	<uni-popup ref="popup" type="bottom">
		<view class="sku-container">
			<view class="item">
				<image class="item-img" :src="sku.pic"></image>
				<view class="item-info">
					<text>商品名:{{sku.name}}</text>
					<view>商品价格: ￥{{sku.minPrice}}</view>
				</view>
			</view>
			<view class="number">
				购买数量:
				<uni-number-box v-model="sku.number" ></uni-number-box>
			</view>
			<button type="warn" size="large" @tap="handleUserAction">确定</button>
		</view>
	</uni-popup>
	<!-- /商品规格弹窗 -->
</template>

<script>
	export default {
		data() {
			return {
				basicInfo: {},
				pics: [],
				content: '',
				// 商品规格
				sku: {},
				options: [ {
					icon: 'home',
					text: '首页',
					path: "/pages/home/home"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 2,
					path: "/pages/cart/cart"
				}],
				customButtonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #ff839e, #b80410)',
						color: '#fff',
						action: 'addCart'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #60F3FF, #088FEB)',
						color: '#fff',
						action: 'buyNow'
					}
				],
				clickAction: '' // 商品行动的目的  addCart加入购物车 buyNow立即购买
			}
		},
		methods: {
			handleUserAction(){
				// 判断加入购物车还是 立即购买
				if (this.clickAction === 'addCart') {
					// 加入购物车
					this.$request('/shopping-cart/add', {
						method: 'POST',
						data: {
							goodsId: this.sku.id,
							number: this.sku.number
						}
					}).then(res => {
						if (res.code === 0) {
							uni.showToast({
								title:"加入购物车成功"
							})
							this.$refs.popup.close();
						}
					})
				} else {
					// 立即购买
				}
			},
			buttonClick(e){
				this.clickAction = e.content.action;
				// 点击加入购物车或者立即购买按钮
				this.$refs.popup.open();
			},
			onClick(e){
				uni.switchTab({
					url:e.content.path
				})
			},
			fetchDetail(id) {
				this.$request("/shop/goods/detail", {
					data: {
						id
					}
				}).then(res => {
					if (res.code === 0) {
						const {
							basicInfo,
							content,
							pics
						} = res.data;
						this.basicInfo = basicInfo;
						this.content = content.replace(/<img/gi, '<img style="display:block;width: 100%"');
						this.pics = pics;
						this.sku = {
							...basicInfo,
							number: 1
						}
						uni.setNavigationBarTitle({
							title: basicInfo.name
						})
					}
				})
			}
		},
		onLoad(options) {
			this.fetchDetail(options.id)
		}
	}
</script>

<style lang="scss" scoped>
	.detail-container {
		swiper {
			width: 750rpx;
			height: 375rpx;

			image {
				width: 750rpx;
				height: 375rpx;
			}
		}
		padding-bottom: 50px;
	}
	.action-bar{
		width:100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
	}
	.sku-container{
		height: 40vh;
		background-color: #fff;
		.item{
			display: flex;
			.item-img{
				width: 120rpx;
				height: 120rpx;
			}
			.item-info{
				flex: 1;
			}
		}
	}
</style>